Image Picker Plugin

Description

Add the ability to select multiple images from the Photo Library using the Image Picker Plugin.

Discussion

The Image Picker plugin can be used to select multiple images from the Photo Library. The typical use case for this plugin is in a disconnected application where you want to add an image to a record, but instead of adding one record with an associated image at a time (to a List control with an associated Detail View), you want to select multiple images at once and then automatically add a new record to a List for each selected image and associate each new record with one of the selected images.

The Image Picker plugin is invoked with this Javascript function:

window.imagePicker.getPictures(successFunction, failureFunction, options);

To see the options supported by the plugin, see cordova-plugin-image-picker on NPM.

Here is how the image picker is used to add a new row to a List control for each selected image. In the code example below, the field in the List that contains the image filename is imageChar.

function getImages() {
    var success = function(results) {
    //add the selected image names to the child List.
    for(var i = 0; i < results.length; i++) {
        var _d = {};
        _d.imageChar = results[i];
        var lObj = {dialog.object}.getControl('LIST1');
        lObj.addTableRow(_d);
        }
    }

    var fail = function(error) {
    }

    var settings = {width: 800};
    window.imagePicker.getPictures(success,fail,settings);

}

In the above example, the imageChar field in LIST1 should be set to an Image control type (on the Fields tab in the List builder). Also, when is LIST1 synchronized, you can upload the selected images to either Amazon S3, or to the Alpha Anywhere server. See the medial files property on the Detail View tab in the List builder for LIST1.

Videos

Using the Image Picker Plugin To Select Multiple Images from the Photo Library

The List control allows you to use the camera on a mobile device to take a picture and then when the List data are synchronized, upload the picture to a server (such as Amazon S3 or the AlphaAnywhere server) and store the picture filename in the database. However, there are situations where you want to capture multiple pictures and adding one record at a time to a List and then using the camera to get the image for each record would be tedious. It would be preferable to be able to open the Image Library (i.e. the Photo Roll) on the device and select as many images as you want. Each selected image would add a new row to a List control.

This video shows how the PhoneGap Image Picker plugin can be used to do this.

• Watch Video

Limitations

Android, iOS